<template>
  <div>
    <topNav text="我的关注" @sendBack="sendBacks"></topNav>
    <div class="watch-list" v-for="item in followsList" :key="item.id">
      <div class="logos">
        <img v-if=" item.head_img" :src="$axios.defaults.baseURL + item.head_img" alt />
        <img v-else src="@/assets/logo.png" alt />
      </div>
      <div class="xinxi">
        <span class="name">{{item.nickname}}</span>
        <br />
        <span class="time">{{item.create_date.split('T')[0]}}</span>
      </div>

      <button @click="back(item.id)" :class="{back:isActive}">{{istext}}</button>
    </div>
  </div>
</template>

<script>
import topNav from "@/components/topNav.vue";
import attention from "@/components/attention.vue";
import { log } from "util";
export default {
  components: {
    topNav,
    attention
  },
  data() {
    return {
      followsList: [],
      isActive: false,
      istext: "取消关注"
    };
  },
  created() {
    this.loadPage();
  },
  methods: {
    loadPage() {
      this.$axios({
        url: "/user_follows",
        method: "get",
        headers: {
          Authorization: "Bearer " + localStorage.getItem("token")
        }
      }).then(res => {
        console.log(res.data);
        this.followsList = res.data.data;
      });
    },
    back(id) {
      this.$axios({
        url: "/user_unfollow/" + id,
        method: "get",
        headers: {
          Authorization: "Bearer " + localStorage.getItem("token")
        }
      }).then(res => {
        console.log(res.data);
        this.loadPage();
      });
    },
    sendBacks() {
      this.$router.replace({ path: "/personal" });
    }
  }
};
</script>
<style lang="less" scoped>
.watch-list {
  overflow: hidden;
  .logos {
    width: 13.89vw;
    height: 13.89vw;
    // background: pink;
    float: left;
    margin: 5.56vw 5.56vw 0vw 5.56vw;
    img {
      border-radius: 50%;
      width: 100%;
      height: 100%;
    }
  }
  .xinxi {
    float: left;
    margin: 6.94vw 8.33vw 0 0;
    font-size: 4.44vw;
    .time {
      font-size: 3.33vw;
      color: #ccc;
    }
  }
  button {
    float: right;
    margin-right: 2.78vw;
    margin-top: 8.33vw;
    width: 22.22vw;
    height: 8.33vw;
    line-height: 8.33vw;
    border: none;
    background: #2878ff;
    color: #fff;
    font-size: 3.89vw;
    border-radius: 4.17vw;
  }
  .back {
    background: #ccc;
  }
}
</style>